<template>
  <el-dialog
    top="30px"
    width="80%"
    class="dialog-sm"
    append-to-body
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <el-tabs v-model="activeName">
      <el-tab-pane label="委托担保合同" name="contract">
        <register-contract-edit
          :related-data="relatedData"
          @success="handleEditContractSuccess"
          :view-mode="viewMode"
          :is-renewal="true"
          :loading="loading"
        ></register-contract-edit>
      </el-tab-pane>
      <el-tab-pane label="反担保合同" name="guard">
        <register-contract-edit-guard
          :related-data="relatedData"
          @dismiss="beforeClose"
          @success="handleEditGuardSuccess"
          :view-mode="viewMode"
          :is-renewal="true"
          :loading="loading"
        ></register-contract-edit-guard>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import RegisterContractEdit from '@/credit/views/county/mission/RegisterContractEdit'
import RegisterContractEditGuard from '@/credit/views/county/mission/RegisterContractEditGuard'

export default {
  components: {
    RegisterContractEdit,
    RegisterContractEditGuard,
  },
  props: {
    visible: Boolean,
    renewalData: {
      type: Object,
      default: () => ({}),
    },
    viewMode: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      activeName: 'contract',
      timer: null,
    }
  },
  computed: {
    relatedData() {
      return {
        ...this.renewalData,
        customer_related_id: this.renewalData.credit_extended_loan_id,
        reply_funds: this.renewalData.new_apply_funds,
        apply_funds: this.renewalData.new_apply_funds,
        load_years: this.renewalData.new_load_years,
        load_rate: this.renewalData.new_load_rate,
        gua_rate: this.renewalData.new_gua_rate,
        load_date: this.renewalData.new_load_date,
        load_end_date: this.renewalData.new_load_end_date,
      }
    },
  },
  watch: {},
  created() {
    this.$once('hook:beforeDestroy', () => {
      if (this.timer) {
        clearTimeout(this.timer)
      }
    })
  },
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
      this.timer = setTimeout(() => {
        this.activeName = 'contract'
      }, 200)
    },
    handleEditContractSuccess() {
      this.beforeClose()
      this.$emit('success')
    },
    handleEditGuardSuccess() {
      this.beforeClose()
    },
  },
}
</script>

<style lang="scss" scoped></style>
